<!--  -->
<template>
    <div class="body">
        <div class="title">缴费管理</div>
        <MyTable v-bind="tableObject">
            <template #buttons="{handleDeleteAll}">
                <el-button type="primary" >添加</el-button>
                <el-button type="danger" @click="handleDeleteAll">批量删除</el-button>
            </template>
            <template #search="{ params, searchSubmit }">
            {{ params }}
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="状态">
                        <el-select clearable v-model="params.state" style="width:120px" placeholder="请选择状态">
                            <el-option label="已缴费" value="2" />
                            <el-option label="未缴费" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="账期">
                        <el-date-picker @change="(e:any)=>dateChange(e, params)" v-model="dateValue" type="daterange"
                            value-format="YYYY-MM-DD" format="YYYY-MM-DD" unlink-panels range-separator="至"
                            start-placeholder="起始日期" end-placeholder="截止日期" />
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="params.name" placeholder="请输入姓名" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchSubmit">搜索</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template #addtime="{scope}">
              <div>
                {{ dateFormat(scope.row.addtime) }}
              </div>
            </template>
            <template #operate="{scope,handleDelete}">
              <div>
                <el-button type="primary">修改</el-button>
                 <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
              </div>
            </template>
        </MyTable>
    </div>
</template>
<script lang='ts' setup>
import MyTable, { TableType } from '../components/MyTable.vue'
import { getList, deleteAll,del } from '../service/fee/fee'
import { reactive, ref } from 'vue'
import moment from 'moment';
const tableObject = reactive<TableType>({
    columns: [
        {
            prop: 'id',
            label: 'id',
            attrs: {
                width: 80
            }
        },
        {
            prop: 'building',
            label: '楼栋名'
        },
        {
            prop: 'userName',
            label: '姓名',
            attrs: {
                width: 140
            }
        },
        {
            prop: 'mobile',
            label: '联系方式',
            attrs: {
                width: 140
            }
        },
        {
            prop: 'type',
            label: '缴费类型',
            attrs: {
                width: 100
            }
        },
        {
            prop: 'addtime',
            label: '导入时间',
            slot:true,
            attrs: {
                width:240
            }
        },{
            prop: 'operate',
            label: '操作',
            slot:true,
            attrs: {
                width:180
            }
        }

        
    ],
    tableData: getList,
    delete:del,
    deleteAll:deleteAll
})

//日期选择器 选择事件
const dateChange = (e: any, params: any) => {

    if (e != null) {
        params.begindate = e[0];
        params.enddate = e[1];
    }
    else {
        params.begindate = "";
        params.enddate = "";
    }
}

const dateValue = ref('')
//格式化时间
const dateFormat = (val: string) => {
    return moment(val).format("YYYY-MM-DD HH:mm");
}
</script>
<style scoped lang="less">
.title {
    margin-bottom: 20px;
}

.page {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>